import React from 'react'
import {useLocation, useNavigate } from 'react-router-dom'
import {TabBar } from 'antd-mobile'
import { UnorderedListOutline, UserOutline,MessageOutline } from 'antd-mobile-icons'

function Tabb() {
    const navigate=useNavigate();
    const pathname=useLocation();
  return (
    <div>
        {/* 封装首页底部tabbar组件 */}
      <div activekey={pathname}>
        <TabBar style={{position:"fixed", bottom:"0", width:"100%", background:"#ccc"}} onChange={(key)=>navigate(key)}>
            <TabBar.Item key={'/'} title={"首页"} icon={<UnorderedListOutline />}></TabBar.Item>
            <TabBar.Item key={'/info'} title={"消息"} icon={<MessageOutline />}></TabBar.Item>
            <TabBar.Item key={'/user'} title={"我的"} icon={<UserOutline />}></TabBar.Item>
        </TabBar>
      </div>
    </div>
  )
}

export default Tabb
